<template>
  <div>
    <div class="head">
      <a @click="$router.push({path: '/Snatch'})" class="return"></a>
      <van-tabs type="card" @change="onClick" background="#cccccc" color="#3ca76d" title-inactive-color="#fff"
                style="width:70%; margin:8px auto 0;">
        <van-tab :title="$t('Prize.v1')"></van-tab>
        <van-tab :title="$t('Prize.v2')"></van-tab>
      </van-tabs>
    </div>
    <div class="overlay">
      <div class="overlay-content scrolling" style="padding-top:10px;">
        <div class="product" v-show="index == 0">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyTeam.v8')"
                            :loading-text="$t('MyTeam.v7')">
            <van-list v-model="loading" :finished="finished" :finished-text="$t('Prize.v3')"
                      :loading-text="$t('MyTeam.v7')" @load="onLoad">
              <div class="product_list" v-for="item,index of list" :key="item.id">
                <div class="product_content weui-flex">
                  <div class="img">
                    <img :src="item.picture" alt style="width:100px; height:100px;"/>
                  </div>
                  <div class="weui-flex__item">
                    <div class="bt">{{item.title}}</div>
                    <div class="red">{{$t('Prize.v4')}}{{parseFloat(item.price ? item.price :
                      '0.00').toFixed(3).slice(0,-1)}}
                    </div>
                    <div class="btm c1">
                      <div class v-show="item.type == 1">{{$t('Prize.v5')}}</div>
                      <div class v-show="item.type == 2">
                        <div v-show="item.memberId == id">{{$t('Prize.v6')}}</div>
                        <div v-show="item.memberId != id">{{$t('Prize.v7')}}</div>
                      </div>
                      <div v-if="item.typeId == 2">{{$t('Prize.v8')}}</div>
                      <div v-if="item.typeId == 1">{{$t('Prize.v9')}}</div>
                      <div class v-show="item.type == 3">{{$t('Prize.v10')}}</div>
                      <div class>{{item.lotteryTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}{{$t('Prize.v11')}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>

        <div class v-show="index == 1">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyTeam.v8')"
                            :loading-text="$t('MyTeam.v7')">
            <van-list v-model="loading" :finished="finished" :finished-text="$t('Prize.v3')"
                      :loading-text="$t('MyTeam.v7')" @load="onLoad">
              <div class="prize_list" v-for="item,index of list" :key="item.id" @click="orderPage(item.id,item.type)">
                <div class="state" v-show="item.type == 2">
                  <div class="green" v-show="item.nowTime < item.endTime">{{$t('Prize.v12')}}</div>
                  <div v-show="item.nowTime > item.endTime">{{$t('Prize.v13')}}</div>
                </div>
                <div class="state green" v-show="item.type == 3">{{$t('Prize.v14')}} &gt</div>
                <div class="weui-flex">
                  <div class>
                    <img class="img" :src="item.picture" alt/>
                  </div>
                  <div class="weui-flex__item">
                    <div class="bt">{{item.title}}</div>
                    <div class="lucky">{{$t('Prize.v15')}}：{{item.memberId}}</div>
                    <div class="price">
                      {{$t('Prize.v16')}}：
                      <span>￥{{parseFloat(item.price ? item.price : '0.00').toFixed(3).slice(0,-1)}}</span>
                    </div>
                    <div style="font-size:12px;color:#666;">
                      {{$t('Prize.v17')}}：
                      <span v-if="item.typeId == 2">{{$t('Prize.v18')}}</span>
                      <span v-if="item.typeId == 1">{{$t('Prize.v19')}}</span>
                    </div>
                  </div>
                </div>
                <div class="weui-flex">
                  <div class="weui-flex__item overdue">
                    <span>*</span>{{item.endTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}{{$t('Prize.v20')}}
                  </div>
                  <div class="operate">
                    <span @click.stop="service">{{$t('Prize.v21')}}</span>
                    <span v-show="item.type == 2 && item.nowTime < item.endTime" @click.stop="order(item.id)"
                          class="receive">{{$t('Prize.v22')}}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
    import {Dialog} from "vant";
    import {dateFormat} from 'vux'
    import {recreation, mine} from './../../utils/api';

    export default {
        data() {
            return {
                index: 0, //0我的参与  1我的奖品
                size: 10, // 每页数量
                total: '', // 总数量
                Customer: '', //客服
                type: -1, //参与-1，奖品1
                list: [],
                id: '',
                listLength: '', //当前总数量
                isLoading: false,
                finished: false,
                loading: false
            };
        },
        mounted() {
            this.record();
            mine.getPersonal().then(res => {
                this.id = res.data.id;
            })
        },
        methods: {
            onClick(name, title) {
                this.index = name;
                if (this.index == 0) {
                    this.type = -1;
                    this.record();
                } else {
                    this.type = 1;
                    this.record();
                }
            },
            service() {
                recreation.getService().then(res => { //联系客服
                    if (res.code == 200) {
                        this.Customer = res.data.value.split("|").join("<br/>").replace(/\s*/g, "");
                        Dialog.alert({
                            title: this.$t('Prize.v21'),
                            messageAlign: 'left',
                            message: this.Customer,
                            confirmButtonText: 'OK',
                            className: 'demo'
                        }).then(() => {
                            // on close
                        });
                    }
                })
            },
            record() {
                recreation.getMyRecord({
                    'size': this.size,
                    'current': 1,
                    'type': this.type,
                }).then(res => {
                    if (res.code == 200) {
                        this.list = res.data.records;
                        this.listLength = res.data.records.length;
                        this.total = res.data.total;
                    }
                });
            },
            order(id) {
                sessionStorage.id = id;
                this.$router.push({
                    path: '/Order'
                })
            },
            onRefresh() { // 下拉刷新
                this.record()
                setTimeout(() => {
                    this.$toast({
                        duration: 800,
                        message: this.$t('Prize.v23')
                    });
                    this.isLoading = false;
                }, 500);
            },
            onLoad() { // 上拉加载
                this.record()
                // 异步更新数据
                setTimeout(() => {
                    if (this.total > this.listLength) {
                        this.size += 10;
                        this.loading = false;
                    } else {
                        // 加载状态结束
                        this.finished = true;
                        this.loading = false;
                    }
                }, 500);
            },
            orderPage(id, typeid) {
                sessionStorage.id2 = id; //商品ID
                if (typeid == 3) {
                    this.$router.push({
                        path: '/OrderPage'
                    })
                }

            }
        },
        filters: {
            dateFormat
        }
    };
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head {
    background: white;
    color: black;
  }

  .head .return:after {
    border-color: #000;
  }

  .green {
    color: #339966;
  }

  .prize_list {
    color: #666;
    background: #fff;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;

    .state {
      position: absolute;
      right: 10px;
      top: 11px;
      font-size: 12px;
    }

    .img {
      width: 80px;
      height: 80px;
      padding-right: 10px;
    }

    .bt {
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      padding-right: 50px;
    }

    .lucky {
      font-size: 12px;
    }

    .price {
      font-size: 12px;

      span {
        text-decoration: line-through;
      }
    }

    .overdue {
      font-size: 12px;
      padding-top: 4px;

      span {
        color: #ff3333;
      }
    }

    .operate {
      span {
        border-radius: 10px;
        border: 1px solid #666;
        font-size: 13px;
        padding: 2px 8px;
      }

      .receive {
        border: 1px solid #fe2020;
        color: #fe2020;
      }
    }
  }

  .red {
    color: #f94951;
    font-size: 13px;
  }

  /deep/ .van-tabs__nav--card {
    border: 0;
  }
</style>
